<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>电影列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .container {
            width: 1200px;
            margin: 50px auto;
        }

        .nav button{
            margin-right: 100px;
            padding: 12px 40px;
            font-size: 16px;
            letter-spacing: .1rem;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #999;
        }

        .nav button.act {
            color: #fff;
            background-color: #f00;
        }

        .pagination {
            display: flex;
            margin: 20px 0;
        }

        .pagination li {
            width: 25px;
            height: 25px;
            margin-right: 15px;
            margin-bottom: 15px;
            text-align: center;
            line-height: 25px;
            border: 1px solid #f00;
            border-radius: 2px;
            cursor: pointer;
            user-select: none;
        }

        .pagination li.act {
            color: #fff;
            background-color: #f00;
        }

        .list {
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            display: flex;
            width: 22%;
            margin-bottom: 15px;
            margin-right: 4%;
            border: 1px solid #eee;
            box-sizing: border-box;
        }

        .item:nth-child(4n) {
            margin-right: 0;
        }

        .item img {
            width: 46%;
            margin-right: 4%;
        }

        .item div {
            width: 48%;
            line-height: 30px;
        }
        
        .item div p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
        }

        .mask-content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            padding: 20px;
            line-height: 30px;
            border-radius: 5px;
            background-color: #fff;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <button data-type="inTheaters" class="act">正在热映</button>
            <button data-type="comingSoon">即将上映</button>
            <button data-type="top">top250</button>
        </div>

        <ul class="pagination">
            <li class="act">1</li>
        </ul>

        <ul class="list">
            
        </ul>
    </div>

    <div class="mask">
        <div class="mask-content">
            <h2></h2>
            <p></p>
        </div>
    </div>
    <script type="text/javascript">
        /* 
            1. 切换电影类型
                更改 URL
            2. 切换分页
                更改 请求参数start
            3. 点击查看详情
                点击事件获取电影 mId

            封装请求函数（更改URL 更改参数 获取到数据回调函数）
            获取数据渲染页面
        */

        var api = {
            inTheaters: "in_theaters",
            comingSoon: "coming_soon",
            top: "top250",
            subject: "subject"
        },
            list = document.querySelector(".list"),
            pagination = document.querySelector(".pagination"),
            navEle = document.querySelector(".nav"),
            mask = document.querySelector(".mask");

        // 进入页面渲染默认 正在热映
        ajax(api.inTheaters, render);

        // 绑定切换类型的事件
        navEle.onclick = function (){
            // 判断点击的是否是button
            var ele = event.target;
            if(ele.tagName === "BUTTON"){
                // 切换激活
                navEle.querySelector(".act").classList.remove("act");
                ele.classList.add("act");
                // 发出请求
                ajax(api[ele.dataset.type], render);
            }
        }

        // 绑定分页的点击事件
        pagination.onclick = function (){
            var ele = event.target;
            // 判断点击元素  closest()
            if(ele.tagName == "LI"){
                pagination.querySelector(".act").classList.remove("act");
                ele.classList.add("act");

                var type = document.querySelector(".nav .act").dataset.type;
                ajax(api[type], render, "?start=" + ele.innerText);
            }
        }

        // 点击电影查看详情
        list.onclick = function (){
            var ele = event.target.closest("li"); // null liEle
            if(ele){
                // 出现遮罩层
                mask.style.display = "block";
                // 发出请求
                ajax(api.subject, function (res){
                    mask.querySelector("h2").innerText = res.data.title;
                    mask.querySelector("p").innerText = res.data.summary;
                }, "?mId=" + ele.dataset.mid);
            }
        }

        mask.onclick = function (){
            this.style.display = "none";
        }

        mask.children[0].onclick = function (){
            // 阻止冒泡
            event.stopPropagation();
        }

        // 根据数据渲染页面
        function render(res, renderPage){
            // 生成页面
            // console.log(res);

            // 生成分页
            if(renderPage){
                var pageStr = "";
                for(var j = 0; j < res.data.totalPage; j ++){
                    pageStr += `<li>${j+1}</li>`;
                }
                pagination.innerHTML = pageStr.replace("li", "li class='act'");
            }

            // 生成电影列表
            var str = "";
            for(var i = 0; i < res.data.list.length; i ++){
                str += `<li class="item" data-mid="${ res.data.list[i].mId }">
                    <img src="${ res.data.list[i].small }" alt="" onerror="loadLocal()">
                    <div>
                        <p>名称：${ res.data.list[i].title }</p>
                        <p>时长：${ res.data.list[i].longtime }</p>
                        <p>类型：${ res.data.list[i].genres }</p>
                        <p>平均分：${ res.data.list[i].rating_average }</p>
                        <p>导演：${ res.data.list[i].director }</p>
                        <p>编剧：${ res.data.list[i].scriptwriter }</p>
                    </div>
                </li>`;
            }
            list.innerHTML = str;
        }

        function ajax(url, callback, params = ""){
            // 1. 声明核心对象
            var xhr = new XMLHttpRequest();
            // 2. 设定返回值类型
            xhr.responseType = "json";
            // 3. 监听请求变化过程，完成时做。。
            xhr.onreadystatechange = function (){
                // 请求完成
                if(xhr.readyState == 4){
                    // 判断请求来的数据是否是可用的 http状态码
                    if(xhr.status == 200){
                        // 如果传入了回调函数，就调用它  !!将任意类型值转成 boolean
                        callback && callback(xhr.response, !params);
                    }else if(xhr.status == 500){
                        console.log("服务器内部错误");
                    }
                }
            }
            // 4. 设定请求类型，请求地址
            xhr.open("GET", "http://bufantec.com/api/douban/movie/" + url + params);
            // 5. 发送请求
            xhr.send(null);
        }

        // 图片加载失败用本地图
        function loadLocal(){
            event.target.src = "../lib/image/bom/m1.jpg";
        }
    </script>
</body>
</html>